<template>
  <div class="app-container">

    <div class="atcBox">

      <div class="aletlCo" v-if="contInfo">
        <div class="artleTi">
          <h2 class="artleTiH2">{{ contInfo.title }}</h2>
          <div class="artleTiCo">
            <span class="artBs">发布时间：{{ contInfo.add_time_text }}</span>
          </div>
        </div>
        <div class="artleCo" v-html="contInfo.content"> </div>
        <div v-if="contInfo.files.length > 0">
          <div class="fujian">
            附件下载
          </div>
          <ul >
            <li v-for="(item,index) in contInfo.files">
              <el-link :download="item.name" class="fujiana" :href="item.url" :icon="Edit">{{ item.name }}</el-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="shBox" v-if="contInfo">
        <div>
          <el-button type="primary" @click="goBack">
            <i-ep-back  width="15px"/>返回列表页</el-button>
        </div>
        <div v-if="route.query.type =='aud'">
          <el-button v-hasPerm="['Doc/examine']" :type="titModel[contInfo.approves.status].type"  @click="openShenHe(contInfo.approves)">
		<template #icon><i-ep-document-checked /></template>{{titModel[contInfo.approves.status].title}}</el-button>
        </div>
      </div>
    </div>

    <el-dialog
     class="elDAlert"
     v-model="shenheDia.visible" 
     title="审核"
     @close="closeDialog">
        <el-form :model="shenheform" label-width="80px">
            <el-form-item label="发布人">
              <el-row >
                 <el-avatar shape="square" :size="30" fit="cover" :src="contInfo.user.avatar" />
                 <span style="margin-left: 10px;"> {{ contInfo.user.name }}</span>
             </el-row>
            </el-form-item>
           <el-form-item label="编号">
               <el-input v-model="contInfo.doc_no" disabled />
            </el-form-item>
            <el-form-item label="标题">
              <el-input v-model="contInfo.title" disabled />
            </el-form-item>
            <el-form-item label="审核状态">
              <el-radio-group :disabled="shenheform.isEidtor"  v-model="shenheform.status">
                <el-radio :value="1">通过</el-radio>
                <el-radio :value="2">驳回</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item  label="备注">
                <el-input 
                :disabled="shenheform.isEidtor" 
                v-model="shenheform.mark" 
                type="textarea"
                rows="6"
                size="large"/>
            </el-form-item>
        </el-form>
        <template #footer>
          <!-- @click="handleSubmit" -->
          <div class="dialog-footer">
            <el-button @click="alertSumit" type="primary" v-if="shenheform.isEidtor == 0">确定</el-button>
            <el-button @click="closeDialog">取 消</el-button>
          </div>
        </template>
    </el-dialog>





   

  </div>
</template>

<script setup lang="ts">

defineOptions({
  name: "Doc",
  inheritAttrs: false,
});
import { UserFilled } from '@element-plus/icons-vue'

import { genFileId, ClickOutside as vClickOutside, UploadInstance } from 'element-plus'
import { useRoute } from 'vue-router';
import Editor from "@/components/WangEditor/index.vue";
import { useUserStore } from "@/store/modules/user";  


//接口地址
import {
  getDocInfo,
  getDoc,
  getDocExamine
} from "@/api/doc";
import router from '@/router';

const useStore = useUserStore();
const titModel=ref([{
  title:'待审核',
  type:'primary'
},{
  title:'已通过',
  type:'success'
},{
  title:'已驳回',
  type:'danger'
}])
const loading = ref(false);
const total = ref(0);
const route = useRoute();
var reload = ref();
const dialog = reactive<DialogOption>({
  visible: false,
});

const shenheDia = reactive<DialogOption>({
  visible: false,
});

const shenheform:any=ref({});
const contInfo:any=ref()
/**
 * 返回上一页
 */
function goBack() {
  router.back();
}

function isPlainObject(obj) {  
    if (typeof obj !== 'object' || obj === null) return false;  
    let proto = obj;  
    while (Object.getPrototypeOf(proto) !== null) {  
        proto = Object.getPrototypeOf(proto);  
    }  
    return Object.getPrototypeOf(obj) === proto;  
}  
  

function getDocInfoApi(){

  if(route.query.type == 'aud' || route.query.type == 'pre' )
  {
    getDoc(route.query.id).then((res)=>{

	if(isPlainObject(res.data.approve))
	{
		res.data.approves  =res.data.approve.log.find((item)=>item.uid == useStore.userId)
	}
	else{
		res.data.approves =""
	}

      contInfo.value =  res.data
		console.log(contInfo)
  }).finally(()=>{})
  }else
  {
    getDocInfo(route.query).then((res)=>{
        contInfo.value = res.data;
    }).finally(()=>{})
  }


}


/**
* 关闭弹窗
*/
function closeDialog() {
  shenheDia.visible = false;
}

/**
 * 审核 - 弹窗
 */
 function openShenHe(el:any){
  shenheDia.visible = true
  let newEl = Object.assign({}, el);
  console.log(newEl)
  if(newEl.status ===0)
  {
    newEl.isEidtor = false;
  }
  else
  {
    newEl.isEidtor = true;
  }
  shenheform.value = newEl;
}

/**
 * 审核内容
 */
 function alertSumit(type:number){
  if(shenheform.value.status <=0)
  {
    ElMessage({
      message: '请选择审核状态',
      type:'warning',
    })
    return false;
  }
  let data = {
     status:shenheform.value.status,
     mark:shenheform.value.mark,
     id:contInfo.value.approve.id
  }
  getDocExamine(data).then((res:any)=>{
    ElMessage({
      message: res.msg,
      type: 'success',
    })
    closeDialog();
    getDocInfoApi();
  }).finally(()=>{})
}

onMounted(() => {
  getDocInfoApi()
})

console.log(route.query)



</script>


<style lang="scss" scoped>
.atcBox {
  background: #ffffff;
	width: 100%;
  margin: 0 auto;
  padding: 30px 40px;
  background: #fff;
  box-sizing: border-box;
}


.aletlCo {
  width: 100%;
 
  .artleTi {
    border-bottom: 1px solid #bfbfbf;
    padding: 8px 0;
    .artleTiH2 {
      font-size: 22px;
      color: #333333;
      text-align: center;
      line-height: 28px;
      font-weight: bold;
      margin-bottom: 8px;
    }
    .artleTiCo {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      .artBs {
        margin-right: 20px;
      }

    }
  }
  .artleCo {
    line-height: 2;
    font-size: 16px;
    padding: 25px 0;
   
  }
}

.fujian{
  font-size: 14px;
  line-height: 30px;
}
.fujiana{
    background-size: 20px 25px;
  
    cursor: pointer;
    color: #2379f7;
}

.shBox{
  display: flex;
  justify-content: space-between;
 
  box-sizing: border-box;
  margin-top: 30px;
}
</style>